<template>
  <div>
    <my-breadcrumb :items="['用户管理', '分销商管理']"></my-breadcrumb>
    <div>
      <Table :columns="disColumns" :data="disList"></Table>
      <page-info :page="page" @pageNumChange="pageChange" @pageSizeChange="pageChange"></page-info>
    </div>
    <Modal v-model="showUser" width="50%">
      <Table :data="userList" :columns="userColumns"></Table>
      <page-info :page="userPage" @pageNumChange="userPageChange" @pageSizeChange="userPageChange"></page-info>
    </Modal>
  </div>
</template>

<script>
import pageInfo from '../../common/pageInfo'
export default {
  name: 'distributor',
  data () {
    return {
      url: {
        list: '/branch/distributor/list',
        del: '/distributor/cancel',
        update: '/distributor/discount/update',
        allUser: '/branch/distributor/invite/user/list'
      },
      disList: [],
      disColumns: [
        {
          title: 'ID',
          type: 'index',
          width: 60
        },
        {
          title: '微信',
          align: 'center',
          render: (h, params) => {
            let sex = params.row.sex === 1 ? 'male' : params.row.sex === 2 ? 'female' : false
            let color = params.row.sex === 1 ? '#2d8cf0' : params.row.sex === 2 ? '#ed3f14' : ''
            return h('div', {
              style: {
                position: 'relative'
              }
            }, [
              h('Avatar', {
                props: {
                  src: params.row.profilePhotoPath
                }
              }),
              h('span', {
                style: {
                  marginLeft: '8px'
                }
              }, params.row.nickname),
              h('Icon', {
                style: {
                  position: 'absolute',
                  top: '18px',
                  left: '24px',
                  display: sex ? 'block' : 'none'
                },
                props: {
                  type: params.row.sex === 1 ? 'male' : 'female',
                  color,
                  size: 14
                }
              })
            ])
          }
        },
        {
          title: '真实姓名',
          key: 'realName',
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'phone'
        },
        {
          title: '价格体系',
          key: 'setupName',
          align: 'center'
        },
        {
          title: '分销折扣',
          key: 'distributorDiscount',
          render: (h, params) => {
            return h('span', {
              style: {
                color: '#ed3f14'
              }
            }, params.row.distributorDiscount + '%')
          }
        },
        {
          title: '用户',
          render: (h, params) => {
            return h('Button', {
              props: {
                size: 'small'
              },
              on: {
                click: () => {
                  this.getThisUser(params.row.id)
                }
              }
            }, '查看他的用户')
          }
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h('Poptip', [
                h('Button', {
                  props: {
                    type: 'error'
                  }
                }, '移除'),
                h('Input', {
                  props: {
                    type: 'password',
                    placeholder: '输入密码移除分销商'
                  },
                  style: {
                    width: '150px'
                  },
                  on: {
                    input: (e) => {
                      this.password = e
                    }
                  },
                  slot: 'content'
                }),
                h('Button', {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => {
                      this.$ajax.post(this.url.del, {distributorId: params.row.id, password: this.password}).then(res => {
                        if (res.data.success) {
                          this.$Message.success('移除成功')
                          document.body.click()
                          this.getList()
                        }
                      })
                    }
                  },
                  slot: 'content'
                }, '确定')
              ])
            ])
          }
        }
      ],

      userList: [],
      userColumns: [
        {
          title: '微信',
          minWidth: 160,
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                props: {
                  src: params.row.profilePhotoPath
                }
              }),
              h('span', params.row.nickname)
            ])
          }
        },
        {
          title: '姓名',
          key: 'realName',
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'phone',
          align: 'center',
          width: 140
        },
        {
          title: '用户等级',
          key: 'level',
          align: 'center'
        },
        {
          title: '用户折扣',
          key: 'userDiscount',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.userDiscount + '%')
          }
        },
        {
          title: '分销商默认折扣',
          key: 'distributorDiscount',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.distributorDiscount ? params.row.distributorDiscount + '%' : '')
          }
        }
      ],
      showUser: false,
      disId: null,
      password: '',

      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      userPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    getThisUser (id) {
      this.disId = id
      this.userPageQuery()
    },
    userPageChange (page) {
      this.userPage = page
      this.userPageQuery()
    },
    userPageQuery () {
      this.$ajax.post(this.url.allUser, {distributorId: this.disId, pageQuery: {pageNum: this.userPage.pageNum, pageSize: this.userPage.pageSize}})
        .then(res => {
          if (res.data.success) {
            this.userList = res.data.data.list
            this.userPage.total = res.data.data.total
            this.showUser = true
          }
        })
    },

    pageChange (page) {
      this.page = page
    },
    pageQuery () {
      this.$ajax.post(this.url.list, {pageNum: this.page.pageNum, pageSize: this.page.pageSize}).then(res => {
        if (res.data.success) {
          this.disList = res.data.data.list
          this.page.total = res.data.data.total
        }
      })
    }
  },
  components: {
    pageInfo
  },
  created () {
    this.pageQuery()
  }
}
</script>

<style scoped>

</style>
